﻿<div class="container form-horizontal">

    <update-meta property="og:title" content="{{share.title}}"></update-meta>
    <update-meta property="og:description" content="{{share.description}}" />
    <update-meta property="og:image" content="{{share.pictureUrl}}" />
    <update-meta property="og:url" content="{{share.url}}" />

    <div class="form-group">
        <div class="row">
            <div class="col-sm-6">
                <carousel interval="2000" no-wrap="noWrapSlides" no-pause="false">
                    <slide ng-repeat="slide in slides" active="slide.active">
                        <img ng-src="{{slide.pictureURL}}" height="450" width="550" style="margin:auto;height: 450px !important;" title={{property.LongHeading}}>
                        <div class="carousel-caption" title={{property.LongHeading}}>
                            <h4>Slide {{$index}}</h4>
                            <p></p>
                        </div>
                    </slide>
                </carousel>
            </div>
            <div class="col-sm-6">

                <div class="row ">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Location</label>
                        <div class="col-sm-8">
                           <span style="font-size:12px">{{property.location}}</span>
                        </div>
                    </div>
                </div>
        

                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Road</label>
                        <div class="col-sm-8">
                            <span> {{property.road}}</span>
                        </div>
                    </div>
                </div>
           

                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Project</label>
                        <div class="col-sm-8">
                            <span> {{property.Project}}</span>
                        </div>
                    </div>
                </div>
            
                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Property Type</label>
                        <div class="col-sm-8">
                            <span> {{property.type}}</span>
                        </div>
                    </div>
                </div>
      

                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4"><span ng-show="property.transact=='S'">Sale </span><span ng-show="property.transact=='R'">Rent </span>Price</label>
                        <div class="col-sm-8" ng-show="property.transact=='S'">
                            <span>   RM {{property.SalePrice | number}}</span>
                        </div>
                        <div class="col-sm-8" ng-show="property.transact=='R'">
                            <span> RM {{property.RentPrice | number}}</span>
                       </div>
                    </div>
                </div>
       

                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Updated Date</label>
                        <div class="col-sm-8">
                            <span>  {{property.UpdateDate | date:"dd/MM/yyyy"}}</span>
                        </div>
                    </div>
                </div>
              
                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Land Area</label>
                        <div class="col-sm-8">
                            <span>   {{property.LandSqrtFt}} sq feet</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Build Up</label>
                        <div class="col-sm-8">
                            <span> {{property.BuildUp}} sq feet</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12" ng-show="property.listType=='RR' || property.listType=='SR'">
                        <label class="col-sm-4">Room</label>
                        <div class="col-sm-8">
                            <span> {{property.Room}}</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12" ng-show="property.listType=='RR' || property.listType=='SR'">
                        <label class="col-sm-4">Bath Room</label>
                        <div class="col-sm-8">
                            <span> {{property.Bathroom}}</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12" ng-show="property.listType=='RR' || property.listType=='SR'">
                        <label class="col-sm-4">Furnish</label>
                        <div class="col-sm-8">
                            <span> {{property.Furnished}}</span>
                        </div>
                    </div>
                </div>
                
                <div class="row PaddingHeight">
                    <div class="col-sm-12" ng-show="property.listType=='RR' || property.listType=='SR'">
                        <label class="col-sm-4">Renovated</label>
                        <div class="col-sm-8">
                            <span>{{property.Renovated}}</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12">
                        <label class="col-sm-4">Tenure</label>
                        <div class="col-sm-8">
                            <span> {{property.Tenure}}</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12" ng-show="property.listType=='RL' || property.listType=='SL'">
                        <label class="col-sm-4">Zoning</label>
                        <div class="col-sm-8">
                            <span>{{property.Zoning}}</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12" ng-show="property.listType=='RI' || property.listType=='SI'">
                        <label class="col-sm-4">Ceiling</label>
                        <div class="col-sm-8">
                            <span>{property.Ceiling}}</span>
                        </div>
                    </div>
                </div>

                <div class="row PaddingHeight">
                    <div class="col-sm-12" ng-show="property.listType=='RI' || property.listType=='SI'">
                        <label class="col-sm-4">Floor Load</label>
                        <div class="col-sm-8">
                            <span> {{property.FloorLoad}}</span>
                        </div>
                    </div>
                </div>

                </div>
            </div>
        <div class="row">
          
            <div style="padding-right:50px">
                <h5 class="col-sm-offset-5 col-xs-offset-5 col-md-offset-5" > REN Information</h5>
            </div>
            <!--<div class="col-sm-8">
                <div class="col-sm-12 PaddingHeight">
                    <label class="col-sm-4">Agent Name</label>
                    <div class="col-sm-8">
                        {{property.agentname}}
                    </div>
                </div>
                <div class="col-sm-12 PaddingHeight">
                    <label class="col-sm-4">Agent Contact</label>
                    <div class="col-sm-8">
                        {{property.mobile}}
                    </div>
                </div>
                <div class="col-sm-12 PaddingHeight">
                    <label class="col-sm-4">Agent Email</label>
                    <div class="col-sm-8">
                        {{property.email}}
                    </div>
                </div>
                <div class="col-sm-12 PaddingHeight">
                    More {{property.agentname}} 's property listings * {{property.staffid}}
                </div>
            </div>-->
            <div class="row">
                <div class="col-lg-offset-5 col-xs-offset-5 col-md-offset-5">
                    <div class="row">

                        <img ng-src="{{property.StaffPicURL}}" height="130" width="100" style="margin: auto;">
                  
                        <div class="row">
                            <div class="col-md-12">{{property.agentname}}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">{{property.mobile}}</div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                {{property.email}}
                                </div>
                            </div>
                     </div>

                </div>

            </div>
            <!--<div class="col-sm-4" align="left">
                <img ng-src="{{property.StaffPicURL}}" height="300" width="230" style="margin: auto;">
            </div>-->
        </div>
        <div class="col-sm-12">
            <div class="col-sm-2">
                <a facebook-feed-share class="facebookShare" data-url='{{share.url}}' data-shares='shares' , data-caption='www.penangrealty.my 世界地產' data-picture='{{share.pictureUrl}}' data-name='{{share.title}}' data-description="{{share.description}}">{{shares}} </a>
            </div>
            <div class="col-sm-2">
                <div gplus data-size="tall" data-annotation="bubble" data-href='{{share.url}}' data-action='share'></div>
            </div>
        </div>
    </div>

        <ng-map default-style="true" center="{{property.Latitude}},{{property.Longitude}}" zoom="15">
            <info-window id="foo" on-mouseover="mouseover()">
                <div ng-non-bindable="" style="font-weight: bold">
                    {{store.LongHeading}}<br />
                    {{store.displayPrice}} <br />
                    Agent : {{store.agentname}}   HP: {{store.mobile}}
                    <a href="/Property/{{store.propertyid}}/{{property.listType}}">View Detail</a>
                </div>
            </info-window>
            <marker ng-repeat="location in nearByList" id="id_{{location.propertyid}}"
                    position="{{location.Latitude}},{{location.Longitude}}" icon="images/PenangRealty_Icon.gif"
                    on-click="showProperty(event, location)"></marker>
            <info-window id="bar" on-mouseover="mouseover()" visible-on-marker="currentProperty">
                <div ng-non-bindable="" style="font-weight: bold">
                    Current Property <br />
                    {{property.Project}} <br />
                </div>
            </info-window>
            <marker id="currentProperty" position="{{property.Latitude}},{{property.Longitude}}" on-click="map.showInfoWindow('bar')" icon="images/ListingIcon.gif" animation="BOUNCE" />
        </ng-map>



</div>
<style>
    .PaddingHeight{
        padding-top:10px;
    }
    .PaddingHeight span{
        font-size :12px;
    }
    ng-map {
        width: 70%;
        height: 100%;
        margin: 0px auto;
        display: inline-block;
        color:black;
    }

</style>